@import './funs.scss';

// 定义主要的颜色
$myColor: blue;

// 定义基本的样式

// ** 没有参数
// 单行内容过长实现...
@mixin ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

// **多行省略超出范围
@mixin ellipsis-more($lineNum: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lineNum;
  -webkit-box-orient: vertical;
}

//上下左右居中
@mixin flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// flex居中，竖排或横排
@mixin flex-layout($direction: row, $justify: center, $align: center) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-direction: $direction;
}

// 常规button
@mixin normal-button() {
  min-width: 256px;
  min-height: 76px;
  display: inline-block;
  border-radius: 13px;
  border: 1px solid #4a59db;
  background: #f8f9fd;
  font-size: 36px;
  font-weight: normal;
  color: #4958db;
  padding-top: 13px;
  padding-bottom: 13px;
}

// 正方形
@mixin square($w) {
  width: $w;
  height: $w;
  text-align: center;
}

// ** 带参数
// 高和行高 一致
@mixin text-height($h) {
  height: $h;
  line-height: $h;
}

// 横向滚动盒子,靠左对齐
@mixin horizontal-scroll($width: 100%) {
  @include flex-layout(row, flex-start, center);
  overflow: scroll;
  overflow-y: hidden;
  width: $width;
}

// 竖向滚动盒子,靠上对齐
@mixin vertical-scroll($height: 100%) {
  @include flex-layout(column, flex-start, center);
  overflow: scroll;
  overflow-x: hidden;
  height: $height;
}

//线性渐变
@mixin linear-y($start-color, $end-color, $start-percent: 0%, $end-percent: 100%) {
  // background-color: $start-color;
  background-image: -webkit-gradient(linear, $start-percent top, $end-percent bottom, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+
  background-image: -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10
  background-repeat: no-repeat;
}

@mixin linear-x($start-color, $end-color, $start-percent: 0%, $end-percent: 100%) {
  // background-color: $start-color;
  background-image: -webkit-gradient(linear, $start-percent left, $end-percent bottom, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+
  background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10
  background-repeat: no-repeat;
}

@mixin wholeScreenPop() {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.5);
  @include flex-center();
}

@mixin form-input() {
  width: 80%;
  margin: 0px 50px 50px 50px;
  .el-form-item__content .el-input,
  .el-form-item__label {
    height: 90px;
    line-height: 90px;
    font-size: 40px;
  }
  .el-form-item__error {
    font-size: 30px;
    margin-top: 5px;
  }
}

// ** 带判断
// 三角形 triangle
@mixin triangle($direction, $size, $borderColor) {
  content: '';
  height: 0;
  width: 0;
  @if $direction == top {
    border-bottom: $size solid $borderColor;
    border-left: $size dashed transparent;
    border-right: $size dashed transparent;
  } @else if $direction == right {
    border-left: $size solid $borderColor;
    border-top: $size dashed transparent;
    border-bottom: $size dashed transparent;
  } @else if $direction == bottom {
    border-top: $size solid $borderColor;
    border-left: $size dashed transparent;
    border-right: $size dashed transparent;
  } @else if $direction == left {
    border-right: $size solid $borderColor;
    border-top: $size dashed transparent;
    border-bottom: $size dashed transparent;
  }
}
